<template>
	<view class="boxs">
		<view class="">
			<!-- <input type="text" value="" @click="img" /> -->
			<Modlexqtitle :list="imglist" :name="obj.name"></Modlexqtitle>
			<view class="pricebox">
				<view class="price">
					<text>￥</text>
					{{identity!=0?obj.distributors_price:obj.price}}
				</view>
				<view class="xiaol">
					月销：{{obj.sale_num||0}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="ggbox">
			<view class="leftbox">
				选择规格
			</view>
			<view class="rightbox" @click="specification">
				<text class="guige">请选择商品规格</text>
				<view class="angle"></view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="remarkbox">
			<view class="spbox">
				<text class="sp">商品评论</text>
				<text>共{{obj.comment_total||0}}条评论</text>
			</view>
			<u-empty text="暂无评论" mode="list" v-if="obj.comment_total==0"></u-empty>
			<Modleremark :remarkarr="obj.comment" v-else></Modleremark>
			<view class="more" @click="moreremark(obj.id)">
				查看全部评论
			</view>
		</view>
		<view class="hr"></view>
		<view class="jianjiebox">
			<view class="sp">商品介绍</view>
			<u-empty text="暂无商品介绍" mode="list" v-if="obj.introduce==''"></u-empty>
			<view class="introduce" v-else>
				{{obj.introduce}}
			</view>
			<view class="imgboxs" v-for="(item,index) in obj.details_imgs" :key="index">
				<image :src="item" mode="widthFix"></image>
			</view>
		</view>

		<view class="dibu">
			<!-- <van-goods-action>
				<van-goods-action-icon :icon="flag?'star':'star-o'" text="收藏" color="#ef0000"  />
				<van-goods-action-icon icon="shopping-cart-o" text="购物车" :info="obj.shopping_cart" />
				<van-goods-action-button text="加入购物车" type="warning" />
				<van-goods-action-button text="立即购买"  />
			</van-goods-action> -->
			<view class="scgwc" @click="onClickIcon">
				<view class="u-iconbox">
					<u-icon :name="!flag?'star':'star-fill'" size="42" :color="!flag?'#000':'#ef0000'"></u-icon>
				</view>
				<view class="college">
					收藏
				</view>
			</view>
			<view class="scgwc">
				<view class="u-iconbox">
					<u-icon name="shopping-cart" color="#000000" size="44"></u-icon>
				</view>
				<view class="college">
					购物车{{obj.shopping_cart}}
				</view>
				<text class="shoppingcarnum" v-if="obj.shopping_cart">{{obj.shopping_cart}}</text>
			</view>
			<view class="addcar" @click="addcar">
				加入购物车
			</view>
			<view class="nowbuy" @click="addcar">
				立即购买
			</view>
		</view>


		<!-- 规格弹框 -->
		<u-popup v-model="show" mode="bottom" closeable="true">
			<view class="upbox">
				<Modkeup :obj="obj"></Modkeup>
				<view class="hr"></view>
				<Modkelable :arr="biaoqian" @confirm="confirmS"></Modkelable>
				<view class="bjqbox">
					<view class="title">
						数量
					</view>
					<u-number-box v-model="value" @change="valChange" input-width="100" input-height="70" min="1"
						:max="max">
					</u-number-box>
				</view>
				<view class="btnbox">
					<view class="addcar" @click="addcars">
						加入购物车
					</view>
					<view class="buybox" @click="nowbuy">
						立即购买
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import Modleremark from "../../components/Modleremark/index.vue"
	import Modlexqtitle from "../../components/Modlexqtitle/index.vue"
	import Modkeup from "../../components/Modkeup/index.vue"
	import Modkelable from "../../components/Modkelable/index.vue"
	import {
		getcommodityinfo,
		getcommoditynum,
		submitorder,
		addshopingcart,
		changecollection
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				imglist: [],
				obj: {},
				identity: 0,
				value: 1,
				name: "海南千禧圣女果小西红柿约1kg新鲜水果",
				remarkarr: [],
				flag: false,
				show: false,
				biaoqian: [],
				attr: [],
				id: 0, // 商品id
				max: 99999,
				num_id: 0, //筛选参数id
				// 用于当标签没选全时候做的判断
				flags: false,
				img: "", //当筛选之后没有图片默认加载一开始弹框图片
			}
		},
		onLoad(e) {
			this.identity = uni.getStorageSync("identity")

			this.id = e.id
		},
		onShow() {
			uni.removeStorageSync('xzcoupons')
			uni.removeStorageSync('selectsite')
			uni.showLoading({
				title: "加载中"
			})
			getcommodityinfo({
				id: this.id
			}).then(res => {
				uni.hideLoading()
				let data = res.data
				this.imglist = data.banners.map(v => {
					return {
						image: v
					}
				})
				this.obj = res.data
				this.img = res.data.img
				res.data.attr = res.data.attr.map(v => {
					v.attr_value = v.attr_value.map(x => {
						return {
							name: x,
							check: false
						}
					})
					return v
				})
				// 判断是否收藏
				if (res.data.collection == 0) {
					this.flag = false
				} else {
					this.flag = true
				}
				this.biaoqian = res.data.attr
			})
		},
		methods: {
			specification() {
				this.show = true
			},
			// 收藏
			onClickIcon() {
				this.flag = !this.flag
				uni.showLoading({
					title: "加载中"
				})
				// type=1收藏，type=2取消收藏
				if (this.flag) {
					let data = {
						commodity_id: this.id,
						type: 1
					}
					changecollection(data).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
					})
				} else {
					let data = {
						commodity_id: this.id,
						type: 2
					}
					changecollection(data).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
					})
				}
			},
			confirmS(e) {
				// 每次点击之前将所有的check重置
				this.biaoqian[e.id1].attr_value.forEach(v => {
					v.check = false
				})
				// 将选中的标签check变为true
				this.biaoqian[e.id1].attr_value[e.id2].check = true
				this.attr[e.id1] = {
					attr_id: this.biaoqian[e.id1].attr_id,
					attr_value: this.biaoqian[e.id1].attr_value[e.id2].name
				};
				// this.value = 1
				// 当选中的标签数组和接口得到的数据相等是调用接口获取数量
				if (this.attr.length == this.biaoqian.length) {
					this.flags = true
					let data = {
						id: this.id,
						attr: this.attr
					}
					getcommoditynum(data).then(res => {
						this.num_id = res.data.num_id
						let a = res.data
						// 如果筛选标签之后没有图片默认加载详情的图片
						if (res.data.img == "") {
							this.obj = {
								distributors_price: a.distributors_price,
								img: this.img,
								name: a.name,
								num: a.num,
								num_id: a.num_id,
								price: a.price
							}
						} else {
							this.obj = res.data
						}

						if (res.data.num == -1) {
							this.max = 99999
						} else {
							this.max = res.data.num
						}
					})
				}
			},
			// 步进器
			valChange(e) {
				// console.log('当前值为: ' + e.value)
			},
			// 弹框选择添加到购物网车是属性
			addcar() {
				this.show = true
			},
			//添加到购物车里面
			addcars() {
				if (this.flags) {
					uni.showLoading({
						title: "添加中"
					})
					let data = {
						id: this.id,
						num_id: this.num_id,
						num: this.value
					}
					addshopingcart(data).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: "添加成功",
							icon: "none",
							duration: 2000
						})
						this.show = false
					})
				} else {
					uni.showToast({
						title: "请选择商品的规格",
						icon: "none",
						duration: 2000
					})
				}
			},
			// 立即购买
			nowbuy() {
				if (this.flags) {
					if (this.obj.num == 0 || this.obj.num < this.value) {
						uni.showToast({
							title: "库存不足，请稍后购买",
							icon: "none",
							duration: 2000
						})
					} else {
						this.jumpLink({
							link: "/pages/Confirm_purchase/index",
							query: {
								commodity_id: this.id,
								num: this.value,
								num_id: this.num_id,
								id: 1
							}
						})
					}
				} else {
					uni.showToast({
						title: "请选择商品的规格",
						icon: "none",
						duration: 2000
					})
				}
			},
			// 查看更多评论
			moreremark(v) {
				this.jumpLink({
					link: "/pages/remarklist/index",
					query: {
						id: v
					}
				})
			}
		},
		components: {
			Modlexqtitle,
			Modleremark,
			Modkeup,
			Modkelable
		}
	}
</script>

<style scoped lang="scss">
	.boxs {
		background-color: #FFFFFF;
	}

	.hr {
		height: 15rpx;
		background-color: #ededed;
	}

	.ggbox {
		height: 122rpx;
		line-height: 122rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.leftbox {
			font-family: MicrosoftYaHei-Bold;
			font-size: 30rpx;
			color: #000000;
		}

		.rightbox {
			display: flex;
			align-items: center;

			.guige {
				font-family: MicrosoftYaHei;
				font-size: 28rpx;
				color: #000000;
				margin-right: 30rpx;
			}

			.angle {
				width: 20rpx;
				height: 20rpx;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				transform: rotate(135deg)
			}
		}
	}

	.more {
		text-align: center;
		margin: 0 auto;
		width: 247rpx;
		height: 65rpx;
		background-color: #FFFFFF;
		border-radius: 65rpx;
		text-align: center;
		color: #000000;
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		line-height: 65rpx;
		border: 1rpx solid #CCCCCC;
	}

	.remarkbox {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.spbox {
			font-family: MicrosoftYaHei;
			font-size: 18rpx;
			color: #999999;
		}
	}

	.sp {
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		color: #000000;
		font-weight: 700;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.jianjiebox {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		margin-bottom: 130rpx;

		.introduce {
			text-indent: 50rpx;
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			line-height: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top: 40rpx;
			color: #282828;
		}

		.imgboxs {
			width: 100%;

			image {
				width: 100%;
				margin-top: 30rpx;
			}
		}

	}

	.dibu {
		position: fixed;
		bottom: 0;
		display: flex;
		background-color: #FFFFFF;
		height: 100rpx;
		width: 100%;
		padding-top: 20rpx;
		padding-left: 41rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.scgwc {
			margin-right: 69rpx;
			position: relative;

			.college {
				text-align: center;
				font-size: 18rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;
				margin-top: 5rpx;
			}

			.u-iconbox {
				text-align: center;
			}

			.shoppingcarnum {
				position: absolute;
				top: 0;
				right: -5rpx;
				background-color: #F50800;
				height: 24rpx;
				border-radius: 24rpx;
				line-height: 24rpx;
				color: #FFF;
				font-size: 18rpx;
				width: 35rpx;
				text-align: center;
			}
		}

		.addcar {
			width: 210rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			background-color: #FF8C25;
			border-radius: 70rpx;
		}

		.nowbuy {
			width: 210rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			border-radius: 70rpx;
			background-color: #F20E0E;
			margin-left: 20rpx;
		}
	}

	.pricebox {
		margin-top: 53rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 70rpx;

		.price {
			font-family: PingFang-SC-Medium;
			font-size: 48rpx;
			color: #ef0000;

			text {
				font-size: 31rpx;
			}
		}

		.xiaol {
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #999999;
			margin-top: 30rpx;
		}
	}

	.upbox {
		padding: 40rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;

		.hr {
			width: 711rpx;
			height: 1rpx;
			background-color: #cccccc;
			margin-top: 37rpx;
		}

		.bjqbox {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			align-items: center;

			.title {
				font-family: SourceHanSansCN-Bold;
				font-size: 28rpx;
				color: #000000;
				font-weight: 700;
			}
		}

		.btnbox {
			display: flex;
			align-items: center;
			margin-left: 290rpx;
			margin-top: 40rpx;

			.addcar {
				width: 210rpx;
				height: 70rpx;
				background-color: #ff8c25;
				border-radius: 35rpx;
				line-height: 70rpx;
				text-align: center;
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #ffffff;
			}

			.buybox {
				width: 210rpx;
				height: 70rpx;
				background-color: #f20e0e;
				border-radius: 35rpx;
				line-height: 70rpx;
				text-align: center;
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #ffffff;
				margin-left: 20rpx;
			}
		}
	}
</style>
